<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer
      title="字段列表"
      :width="screenWidth"
      @close="onClose"
      :visible="visible"
    >
      <!-- 抽屉内容的border -->
      <div
        :style="{
          padding:'10px',
          border: '1px solid #e9e9e9',
          background: '#fff',
        }">
        <div>
          <a-table
            ref="table"
            :rowKey="(r,p)=>{return p}"
            size="middle"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading"
          >

          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
          </span>
          </a-table>
        </div>
      </div>
    </a-drawer>
    <field-config ref="modalForm"  @ok="modalFormOk"></field-config>
  </a-card>
</template>

<script>
  import pick from 'lodash.pick'
  import {filterObj} from '@/utils/util';

  import FieldConfig from "./modules/FieldConfig";
  import {getAction} from "../../api/manage";

  export default {
    name: "ColumnList",
    components: {FieldConfig},
    data() {
      return {
        columns: [
          {
            title: '字段名称',
            align: "center",
            dataIndex: 'columnName',
          },
          {
            title: '实体属性',
            align: "center",
            dataIndex: 'fieldName',
          },
          {
            title: '是否必填',
            align: "center",
            dataIndex: 'required',
            customRender:(text)=>{
              if(text == 'true'){
                  return '是'
              }else  if(text == 'false'){
                  return '否'
              }else {
                  return '--'
              }
            }
          },
          {
            title: '字段含义',
            align: "center",
            dataIndex: 'columnComment',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        dataSource:[],
        loading:false,
        tableId:'',
        title: "操作",
        visible: false,
        screenWidth: 1200,
        model: {},
        dictId: "",
        status: 1,
        labelCol: {
          xs: {span: 5},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 12},
          sm: {span: 12},
        },
        url: {
          list: "generator/table/column/list",
          delete: "/sys/dictItem/delete",
          deleteBatch: "/sys/dictItem/deleteBatch",
        },
      }
    },
    created() {
      // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
      this.resetScreenSize();
    },
    methods: {
      add(dictId) {
        this.dictId = dictId;
        this.edit({});
      },
      list(record) {
        this.visible = true;
        this.tableId = record.id;
        this.loadData({"tableId":record.id});
      },
      loadData(queryParam){
        this.loading = true;
        getAction(this.url.list,queryParam).then(res=>{
          if(res.success){
            this.dataSource = res.result;
          }
        }).finally(()=>{
          this.loading = false;
        })
      },
      handleEdit(record){
        this.$refs.modalForm.edit(this.tableId,record.fieldName);
      },
      showDrawer() {
        this.visible = true
      },
      onClose() {
        this.visible = false
        this.form.resetFields();
        this.dataSource = [];
      },
      modalFormOk(){
        this.loadData({"tableId":this.tableId })
      },
      // 抽屉的宽度随着屏幕大小来改变
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 900) {
          this.screenWidth = screenWidth;
        } else {
          this.screenWidth = 900;
        }
      },
    }
  }
</script>
<style scoped>
</style>